<template>
  <div>
    <div v-for="(toking, index) in tokings" :key="index">
      <!-- 头部开始 -->
      <!-- <router-link to="/lx">
        <van-nav-bar left-text="返回" left-arrow fixed />
      </router-link>-->
      <van-nav-bar
        title="景点详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        fixed
      />
      <!-- 头部结束 -->
      <!-- 轮播图开始 -->
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
        <van-swipe-item>
          <img v-lazy="toking.img1" alt />
        </van-swipe-item>

        <van-swipe-item>
          <img v-lazy="toking.img2" alt />
        </van-swipe-item>

        <van-swipe-item>
          <img v-lazy="toking.img3" alt />
        </van-swipe-item>

        <van-swipe-item>
          <img v-lazy="toking.img4" alt />
        </van-swipe-item>

        <van-swipe-item>
          <img v-lazy="toking.img5" alt />
        </van-swipe-item>
      </van-swipe>
      <!-- 轮播图结束 -->
      <!-- 轮播图下文字开始 -->
      <span class="dianpu">店铺</span>
      <b>
        <span>{{ toking.article }}</span>
      </b>
      <p>
        <span class="tishi-tag">{{ toking.remind1 }}</span>
        <span class="tishi-tag">{{ toking.remind2 }}</span>
        <span class="tishi-tag">{{ toking.remind3 }}</span>
      </p>
      <p>
        <b class="money">￥{{ toking.money }}</b>
      </p>
      <!-- 轮播图下文字结束 -->
      <!-- 二次确认框 -->
      <van-cell is-link @click="showPopup" class="tanchu"
        >服务 √二次确认</van-cell
      >
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" />
      <!-- 二次确认框结束 -->
      <!-- 评论区开始 -->
      <div class="comment">
        <p>
          <span class="comment-top-l">峰峰点评</span>
          <span class="comment-top-r">5分 超棒</span>
        </p>
        <p>
          <span class="comment-cent-l">
            <img v-lazy="toking.pinglun1" alt />
            {{ toking.pinglun2 }}
          </span>

          <span class="comment-cent-r">8月前</span>
        </p>
        <p class="comment-botom">{{ toking.pinglun3 }}</p>
      </div>
      <!-- 评论区结束 -->

      <!-- 店铺开始 -->
      <van-cell is-link @click="showPopup" class="tanchu">
        <img v-lazy="toking.dpimg" alt />
        <span>{{ toking.dpmz }}</span>
      </van-cell>

      <!-- 店铺结束 -->

      <!-- 详情开始 -->
      <van-row>
        <van-col span="8">图文介绍</van-col>
        <van-col span="8">费用说明</van-col>
        <van-col span="8">购买须知</van-col>
      </van-row>
      <!-- 详情结束 -->

      <!-- 底部图片开始 -->
      <img class="dibu" v-lazy="toking.tuwen1" alt />
      <img class="dibu" v-lazy="toking.tuwen2" alt />
      <img class="dibu" v-lazy="toking.tuwen3" alt />
      <!-- 底部图片结束 -->

      <!-- 底部购物车开始 -->
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
        <van-goods-action-icon icon="cart-o" text="店铺" />
        <van-goods-action-icon icon="star" text="收藏" />
        <van-goods-action-button type="warning" text="加入购物车" />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="goumai"
        />
        <!-- @click.native="flushCom" -->
        <!-- :to="{ path:'/jiesuan' , query:{cid:cid} }" -->
      </van-goods-action>
      <!-- 底部购物车结束 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      tokings: [],
      cid: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/lx");
    },
    showPopup() {
      this.show = true;
    },
    goumai() {
      // console.log(this.$store.state.uname);
      if (this.$store.state.uname != "") {
        this.$router.push({ path: "/jiesuan", query: { cid: this.cid } });
      } else {
        this.$toast("请先登录");
        this.$store.commit("setGoto", "lxgm");
        this.$router.push("/login");
      }
    },
    // 使用router-link跳转到页面时,页面刷新
    // flushCom() {
    //   this.$router.go(0);
    // },
  },
  mounted() {
    let cid = this.$route.query.id;
    // console.log(cid);
    this.$axios.get("details?cid=" + cid).then((res) => {
      this.tokings = res.data.result;
    });
    this.cid = cid;
  },
};
</script>

<style scoped>
.van-swipe {
  width: 100%;
  height: 220px;
  margin-bottom: 5px;
}
.van-swipe {
  width: 100%;
  height: 220px;
}
.dianpu {
  display: inline-block;
  width: 40px;
  line-height: 16px;
  color: #4d97ff;
  padding: 0 4px;
  font-size: 12px;
  border: 1px solid #4d97ff;
  margin: 0 3px;
  text-align: center;
}
.tishi-tag:nth-child(1),
.tishi-tag:nth-child(2) {
  width: 50px;
}
.tishi-tag {
  display: inline-block;
  width: 80px;
  height: 16px;
  font-size: 12px;
  text-align: center;
  margin: 2px 5px;
  background: #f6f7f9;
}
.money {
  font-size: 20px;
  color: red;
}
.tanchu {
  border-top: 1px solid #f6f7f9;
  border-bottom: 2px solid #f6f7f9;
  margin: 2px 0;
}
.comment {
  width: 96%;
  margin: 0 auto;
}
.comment p {
  width: 100%;
  height: 20px;
}
.comment-top-l,
.comment-cent-l {
  float: left;
}
.comment-top-r {
  float: right;
  color: #4c97ff;
}
.comment-cent-r {
  float: right;
}
.comment-cent-l img {
  width: 20px;
}
.comment-botom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 3px;
}
.van-cell img {
  width: 40px;
  height: 40px;
}
.van-col {
  line-height: 44px;
  text-align: center;
}
.dibu {
  width: 100%;
}
</style>
